import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // state就是数据，如果数据定义在state中组件中如果要使用这个数据 this.$store.state.属性名 的方式获取
    num: 15
  },
  mutations: {
    // state 中的数据不能被直接修改，如果要修改这些数据，需要使用mutation，注意mutation中不能使用异步更新state
    add (state) {
      // mutation函数的第一个参数是state对象，所有的数据都定义state中，在mutation函数中通过state可以修改 上面state中的数据；
      state.num++
    },
    addNum (state, payload) {
      // mutation的第二个参数 payload是在 commit mutation时传入的参数
      state.num += payload
    }
  },
  actions: {
    // action可以使用异步，但是更新数据仍然需要 commit 对应的mutation
    asyncAdd(context) {
      setTimeout(() => {
        context.commit('add')
      }, 1000)
    }
  }
})